<template>
  <div class="login_register">
    <div class="login_header">
      <div><img :src="src" alt="" srcset="" class="website_log" /></div>
      <div class="curentName">登录</div>
    </div>
    <div class="information_form">
      <div class="login_img"><img :src="src1" alt="" srcset="" class="img_pic" /></div>
      <div class="form">
        <div class="title">
          <div class="title_left">会员登录</div>
          <div class="title_right">
            <span>
              还没帐号？
              <span>立即注册</span>
            </span>
          </div>
        </div>
        <div class="ipt">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize">
            <el-form-item label="账号" prop="name"><el-input v-model="ruleForm.name" placeholder="请输入用户名/手机号/邮箱号"
                clearable /></el-form-item>
            <el-form-item label="密码" prop="passWord"><el-input v-model="ruleForm.passWord" placeholder="请输入" clearable
                show-password /></el-form-item>
            <el-form-item label="重复密码" prop="comfirmPassWord" v-show="ruleForm.passWord">
              <el-input v-model="ruleForm.comfirmPassWord" placeholder="请再次输入" clearable show-password />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['curentStatus'],
  data() {
    return {
      src: 'http://r.x2.jeecms.com/u/cms/www/2023/06/30/1674779022510346243.png',
      src1: '../img/pic4.jpg',
      list: [],
      url: '',
      activeChannel: '',
      Path: getRootPath(),
      ruleForm: {
        name: '1111',
        passWord: '',
        comfirmPassWord: '',
      },
      rules: {
        name: [{ required: true, message: '请输入账号！', trigger: 'blur' },],
        passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度6-20位', trigger: 'blur' }],
        comfirmPassWord: [{ required: true, trigger: 'blur' }],
      }
    };
  },
  watch: {
    'ruleForm.passWord'(newVal, oldVal) {
      if (newVal) {
        // this.rules.comfirmPassWord[0].validator = this.checkPassword;
      }
    }
  },
  created() { },
  mounted() {
  },
  methods: {
    checkPassword(rule, value, callback) {
      router.beforeEach(async (to, from, next) => {

        const whiteList = ['/login']
        let token = store.getters.GET_TOKEN;
        let hasRoutes = store.state.hasRoutes;
        let menuList = store.getters.GET_MENULIST;

        if (token) {
          console.log(store.state.editabTabs)
          if (!hasRoutes) {
            bindRoute(menuList);
            store.commit("SET_ROUTES_STATE", true);
            //next({ ...to, replace: true });//----------解决
            next({ path: '/index' }); //----------解决
          }
          next();
        } else {
          if (whiteList.includes(to.path)) {
            next();
          } else {
            next('/login');
          }
        }
      })
      //添加动态路由
      const bindRoute = (menuList) => {

        let newRoutes = router.options.routes;

        menuList.forEach(menu => {
          if (menu.children) {
            menu.children.forEach(m => {
              // 菜单转成路由
              let route = menuToRoute(m, menu.name);
              if (route) {
                newRoutes[0].children.push(route); // 添加到路由管理
              }
            })
          }
        })
        // 重新添加到路由
        newRoutes.forEach(route => {
          router.addRoute(route)
        })

      }
      // 菜单转成路由
      const menuToRoute = (menu, parentName) => {
        let route = {
          name: menu.name,
          path: menu.path,
          meta: {
            parentName: parentName
          },
          children: [],
        }
        if (!menu.component) {
          route.component = ''
        } else {
          route.component = () => import('@/views/' + menu.component + '.vue')
        }
        return route
      }

    }
  }
};
</script>

<style>
.login_register {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login_header {
  width: 100%;
  padding: 23px;
  background: #fff;
  display: flex;
  padding-left: 18.75%;
  margin-bottom: 175px;
}

.login_register .website_log {
  width: 100%;
  height: auto;
  padding-right: 8px;
  border-right: 1px solid #efefef;
}

.login_register .curentName {
  height: 20px;
  font-size: 20px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  padding-left: 16px;
}

.login_register .information_form {
  width: 980px;
  height: 570px;
  background: #ffffff;
  box-shadow: 0px 6px 45px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  display: flex;
  padding: 15px 40px 15px;
}

.login_register .information_form .login_img {
  width: 373px;
  height: 540px;
  position: relative;
}

.login_register .information_form .form {
  flex: 1;
  padding-left: 40px;
}

.login_register .information_form .form .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}

.login_register .information_form .form .title .title_left {
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
}

.login_register .information_form .form .title .title_right span {
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 14px;
}

.login_register .information_form .form .title .title_right span span {
  color: #1059e9;
  cursor: pointer;
}

.login_register .information_form .form .title .title_right span span:hover {
  color: #387df5;
}

.login_register .information_form .form .title .title_right span span:active {
  color: #043dc2;
}

.login_register .information_form .form .ipt {
  margin-top: 40px;
}
</style>
<style>
.login_register .el-form .el-form-item {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  margin-bottom: 10px;
}

.login_register .el-form .el-form-item .el-form-item__label {
  justify-content: flex-start;
}

.login_register .el-form .el-form-item .el-input__wrapper {
  border-color: #e0e0e0;
}

.login_register .el-form .el-form-item .el-input__wrapper:hover {
  border-color: #b3b3b3;
}

.login_register .el-form .el-form-item .is-focus {
  box-shadow: 0 0 0 1px #b3b3b3 inset;
}

.login_register .el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ff3333 inset;
}

.login_register .el-form .el-form-item__error {
  margin-top: 8px;
  color: #ff3333;
  position: relative;
}
</style>
